import ReactDOM from 'react-dom'

const list = [
  { id: 100, name: 'tom', age: 15 },
  { id: 101, name: 'jack', age: 18 },
  { id: 102, name: 'tony', age: 20 }
]

// jsx样式-使用style
// 1. 去掉上一个列表案例 ul 的点，加上背景样式，设置字体大小
// 2. 给第一个 p 设置两倍字体大小


const element = (
  <ul style={{ listStyle: 'none', backgroundColor: 'pink', fontSize: 20 }}>
    {list.map(item => {
      return (
        <li key={item.id}>
          <p style={{ fontSize: '2em' }}>姓名：{item.name}</p>
          <p>是否成年：{item.age > 16 ? '是' : '否'}</p>
        </li>
      )
    })}
  </ul>
)


ReactDOM.render(element, document.getElementById('root'))